<template>
  <div class="auto_area">
    <div class="area_content">
      <div class="areabar">
        <div @click="cancle" class="clearname" style="text-align: center; color:#08F;">关闭</div>
        <div @click="ok"  class="clearname" style="text-align: center; color:#08F;">确定</div>
      </div>
      <div class="canvasqz">
        <autoarea style="height:344px;" @selected="selected" type="mobile" :province="province" :city="city" :area="county"></autoarea>
      </div>
    </div>

  </div>
</template>

<script>
//  import VDistpicker from 'v-distpicker'
  import VDistpicker from '../../components/v-area/index'

  export default {
    name: 'v-distpicker',
    components: {autoarea: VDistpicker},
    props:['province','city','county'],
    data () {
      return {
        areaObj:{}
      }
    },
    created () {

    },
    methods: {
      ok () {
        //this.$emit('sureArea',this.areaObj);
        this.callback(this.areaObj)
      },
      cancle () {
        this.callback()
      },
      selected(obj){
        this.areaObj = obj;
        console.log(obj)
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss" scoped>

  .canvasqz {
    height: 344px;
    position: relative;
    border: 1px solid #DDD;
    overflow: hidden;
    /*margin-bottom: 10px;*/
  }
  .auto_area {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9999;
    bottom: 0;
    background: #FFF;
  }
  .area_content{
  }
  .areabar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 10px 20px;
    background-color: #eee;

  }

</style>
<style>
  .address-container{
    height: 344px;
  }
</style>
